<template>
  <view class="scroll-box">
    <scroll-view
      :style="{ height: '100%' }"
      :lower-threshold="100"
      :refresher-threshold="30"
      upper-threshold="50"
      :scroll-y="true"
      @scrolltoupper="scrolltoupper"
      @scroll="scroll"
    >
      <view
        @touchstart="_refresherTouchstart"
        @touchmove="_refresherTouchmove"
        @touchend="_refresherTouchend"
        class="list-box"
      >
        <view
          class="item"
          v-for="(item, index) in list"
          :key="index"
          @click="test(item)"
        >
          {{ item.name }}
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  options: {
    virtualHost: true,
  },
};
</script>
<script setup>
const vue3This = getCurrentInstance().proxy;
const listBoxRef = ref({});
const list = ref();
// 获取元素属性
function getEleQuery(ele) {
  // console.log("ele", ele);
  uni
    .createSelectorQuery()
    .in(vue3This)
    .select(ele)
    .boundingClientRect(function (rect) {
      if (rect) {
        //   resolve(rect);
        listBoxRef.value = rect;
      }
    })
    .exec();
}
onReady(() => {
  list.value = Array.from({ length: 100 }, (item, index) => {
    return {
      name: index,
    };
  });
  getEleQuery(".list-box");
});
function scroll(e) {
  console.log("eeee", e);
}
function scrolltoupper() {
  console.log("滚动到顶部");
  let list1 = Array.from({ length: 10 }, (item, index) => {
    return {
      name: 3,
    };
  });
  list.value.unshift(...list1);
}
function _refresherTouchstart(e) {
  //   const listBoxEle = await getEleQuery(".list-box");
  console.log("listBoxEle--", listBoxRef.value);
  console.log("_refresherTouchstart---", e);
}
function _refresherTouchmove(e) {
  //   const listBoxEle = await getEleQuery(".list-box");
  console.log("_refresherTouchmove---", e);
  console.log("_refresherTouchmovelistBoxEle--", listBoxRef.value);
}
function _refresherTouchend(e) {
  //   const listBoxEle = await getEleQuery(".list-box");
  console.log("_refresherTouchend---", e);
  console.log("_refresherTouchendlistBoxEle--", listBoxRef.value);
}

function test() {
  console.log("点击事件1");
  // uni.navigateTo({
  //   url: "/pages/chat/pic",
  // });
}
</script>

<style lang="scss" scoped>
.scroll-box {
  height: 100vh;
  .item {
    height: 200rpx;
  }
}
</style>
